import React from 'react';
import { Carousel } from 'antd';
import { isEqual, isEmpty } from 'lodash';
import { WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

//多图元素
class ImgSlideCom extends React.Component {
	constructor(props) {
        super(props);
        this.state = {
            ewidth: 0,
            eheight: 0,
        }
        this.aClick = this.aClick.bind(this);
        this.autoCarousel = this.autoCarousel.bind(this);
        this.initSlide = this.initSlide.bind(this);
    }

	componentDidMount() {
		const { eid, data, isSetting } = this.props;
		const {imgsrclist,imgdesclist,height,displaydesc,cellwidth,autoSwitchTime} = data;
		let rowcount = parseInt(data.rowcount);
		this.initSlide(eid, rowcount,autoSwitchTime);
		let mleft = "-"+(18*rowcount/2)+'px';
		$('#banner_'+eid+"_"+isSetting+' ul').css('margin-left',mleft);
        this.setState({
            ewidth: $(`#content_${eid}`).width(),
            eheight: $(`#content_${eid}`).height(),
        });
	}
    aClick (link = '') {
        if(link != ''){
            window.open(link);
        }else return false;
    }

    autoCarousel(rowcount,autoSwitchTime,_n){
        const { eid, isSetting } = this.props;
		if (rowcount > 1) {
            clearInterval(window[`_t_${isSetting}_${eid}`]);
            window[`_t_${isSetting}_${eid}`] = setInterval(function() {
				_n = _n >= (rowcount - 1) ? 0 : ++_n;
				// $("#banner_"+eid+"_"+isSetting+" li").eq(_n).trigger('click');
				bannerClick(eid, _n, rowcount, isSetting)
			}, autoSwitchTime);
		}
	}

    shouldComponentUpdate(nextProps, nextState){
        return !isEqual(this.props, nextProps) || !isEqual(this.state,nextState)
    }

    initSlide(eid,rowcount,autoSwitchTime) {
		const { isSetting } = this.props;
        let _n = 0;
        let _count = 0;
        var temp= rowcount;
        _count = $("#banner_list_"+eid+"_"+isSetting+" .portal-imgslide-img").length;
        $("#banner_list_"+eid+"_"+isSetting+" .portal-imgslide-img:not(:first-child)").hide();
        $("#banner_info_"+eid+"_"+isSetting).click(function() {});
        $("#banner_"+eid+"_"+isSetting+" li, #banner_info_"+eid+"_"+isSetting+" .slidebox_info_item").click(function() {
            var i = $(this).attr("data-index") - 1; //
            _n = i;
            if (i >= rowcount) return;
            $("#banner_info_"+eid+"_"+isSetting).unbind().click(function() {});
            $("#banner_list_"+eid+"_"+isSetting+" .portal-imgslide-img").filter(":visible").css("display", "none").parent().children().eq(i).css("display", "block");
            // document.getElementById("banner_"+eid+"_"+isSetting).style.background = "";
            if(document.getElementById("banner_"+eid+"_"+isSetting)) {
                document.getElementById("banner_"+eid+"_"+isSetting).style.background = "";
			}
            $("#banner_"+eid+"_"+isSetting+" li").eq(i).toggleClass("on");
            $("#banner_info_"+eid+"_"+isSetting).find(".slidebox_info_item").removeClass("slidebox_info_item_slt");
            $("#banner_info_"+eid+"_"+isSetting).find(".slidebox_info_item").eq(i).addClass("slidebox_info_item_slt");

            $(this).siblings().removeAttr("class");
        });
        if (rowcount > 1) {
            //_t = setInterval(showAuto.bind(this,eid), autoSwitchTime);
            clearInterval(window[`_t_${isSetting}_${eid}`]);
            window[`_t_${isSetting}_${eid}`] = setInterval(function() {
                _n = _n >= (rowcount-1) ? 0 : ++_n;
                // $("#banner_"+eid+"_"+isSetting+" li").eq(_n).trigger('click');
                bannerClick(eid, _n, rowcount, isSetting);
            }, autoSwitchTime);
        }
        $("#banner_"+eid+"_"+isSetting).hover(() => {
            // clearInterval(this._t)
            $("#settingico_"+eid).parent().show();
		}, () => {
            this.autoCarousel(rowcount,autoSwitchTime,_n);
		} );
    }


	render() {
		const { eid, data, isSetting } = this.props;
		const { ewidth, eheight } = this.state;
		const { imgsrclist, imgdesclist, height = '0', rowcount, displaydesc, cellwidth, type, imgAddress, fontSize = '16'} = data;
		var style = {fontFamily:'微软雅黑'};
		var style1 = {display:'none'};
		if(displaydesc != 1){
			style = {fontFamily:'微软雅黑',display:'none'};
			style1={};
		}
		var col1 = new Array;
		var col2 = new Array;
		for (var j=0; j<parseInt(rowcount); j++) {
		    col1.push(<col width={`${cellwidth}%`}/>);
		    col2.push(<col width="1px"/>);
		}
		let liHtml = new Array;
		let aHtml = new Array;
		let dHtml = new Array;
		imgdesclist.map((item,i)=>{
			let astyle = {
                background:'url('+imgsrclist[i]+') center center / cover no-repeat',
                backgroundSize:'100% 100%',
                height:'100%'
            }
			switch(type){
		        case 'adapt':
                    astyle = {
                        background:'url('+imgsrclist[i]+') center center no-repeat',
                        backgroundSize:'auto 100%',
                        height:'100%'
                    }
                    break;
		        case 'fill':
                    astyle = {
                        background:'url('+imgsrclist[i]+') center center / cover no-repeat',
                        backgroundSize:'100% 100%',
                        height:'100%'
                    }
		            // astyle.backgroundRepeat = 'no-repeat';
		            // astyle.backgroundSize = 'cover';
                    // astyle.width = ewidth;
                    // astyle.height = eheight;
		            break;
		        case 'tile':
                    astyle = {
                        background:'url('+imgsrclist[i]+') repeat',
                        height:'100%'
                    }
		            break;
                case 'stretch':
                    astyle = {
                        background:'url('+imgsrclist[i]+') center center / 100% 100% no-repeat',
                        height:'100%'
                    }
		            break;
		        case 'center':
                    astyle = {
                        background:'url('+imgsrclist[i]+')',
                        backgroundPosition: 'center center',
                        backgroundRepeat: 'no-repeat'
                    }
		            break;
		        default:
		            astyle.backgroundRepeat = 'no-repeat';
		            astyle.backgroundSize = '100% 100%';
		            astyle.mozBackgroundSize = '100% 100%';
		            break;
		    }
           	liHtml.push(<li className={i===0?'on':''} data-index={i+1}></li>);
            if(type == 'adapt') {
                aHtml.push(<div className={'portal-imgslide-img'} onClick={()=>this.aClick(imgAddress[i])}><img src={imgsrclist[i]} style={{width: '100%'}} alt=""/></div>);
                {/*<a href="javascript:void(0)" onClick={()=>this.aClick(imgAddress[i])}>*/}
                    {/*/!*aHtml.push(<a href={} target="_blank">*!/*/}
                    {/*<div className="slidebox_list_item" style={astyle}>*/}
                    {/*</div>*/}
                {/*</a>*/}
			}else {
                aHtml.push(<a className={'portal-imgslide-img'} href="javascript:void(0)" onClick={()=>this.aClick(imgAddress[i])}>
                    {/*aHtml.push(<a href={} target="_blank">*/}
                    <div className="slidebox_list_item" style={astyle}>
                    </div>
                </a>);
			}
         	dHtml.push(<td>
           		 <div className={`slidebox_info_item ${i === 0 ? 'slidebox_info_item_slt':''}`} title={item} style={{fontSize: fontSize+'px'}} data-index={i+1}>
                {item}
                </div>
            </td>);
		});
		return <div id={`imgslide_${eid}`} style={{width: '100%',height: type == 'adapt' ? '' : height+ 'px'}}>
			  <div id={`banner_${eid}_${isSetting}`} className="slidebox_block" style={{height: '100%'}}>
			    <div id={`banner_info_${eid}_${isSetting}`} className="slidebox_info" style={style}>
			      <table width="100%" height="100%" cellpadding="0" cellspacing="0">
			        <colgroup>
			          {col1}
		          	</colgroup>
			        <tbody>
			          <tr>
			           {dHtml}
			          </tr>
			        </tbody>
			      </table>
			    </div>
			    <ul style={style1}>
			     {liHtml}
			    </ul>
			    <div id={`banner_list_${eid}_${isSetting}`} className="slidebox_list" style={{height: '100%'}}>
				{aHtml}
			    </div>
			  </div>
			</div>
	}
}



function bannerClick(eid, _n, rowcount, isSetting) {
    var i = _n; //
    if (i >= rowcount) return;
    $("#banner_info_"+eid+"_"+isSetting).unbind().click(function() {});
    $("#banner_list_"+eid+"_"+isSetting+" .portal-imgslide-img").filter(":visible").css("display", "none").parent().children().eq(i).css("display", "block");
    if(document.getElementById("banner_"+eid+"_"+isSetting)){
        document.getElementById("banner_"+eid+"_"+isSetting).style.background = "";
	}
    $("#banner_"+eid+"_"+isSetting+" li").eq(i).toggleClass("on");
    $("#banner_info_"+eid+"_"+isSetting).find(".slidebox_info_item").removeClass("slidebox_info_item_slt");
    $("#banner_info_"+eid+"_"+isSetting).find(".slidebox_info_item").eq(i).addClass("slidebox_info_item_slt");

    $(this).siblings().removeAttr("class");
}

import { WeaErrorPage, WeaTools } from 'ecCom';
class MyErrorHandler extends React.Component {
	render() {
		const hasErrorMsg = this.props.error && this.props.error !== "";
		return (
			<WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@sn68jg`} msg={hasErrorMsg?this.props.error:getLabel(385218,"对不起，该页面异常，请联系管理员！")} />
		);
	}
}
ImgSlideCom = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(ImgSlideCom);
export default ImgSlideCom;

